<!--
 @description
 @fileName TabList.vue
 @author zengqiongying
 @created 2022/12/30 15:23:04
-->
<template>
  <Scroll ref="scroll" horizontal class="scoll-content">
    <div ref="tabs" class="tabs">
      <div
        v-for="(item,i) in list"
        :key="i"
        :class="['tab',{'active':activeTab===item[valueKey]}]"
        @click="handleClick(item)"
      >
        <span>{{ item[labelKey] }}</span>
      </div>
    </div>
  </Scroll>
</template>

<script>
import Scroll from '@/components/Scroll'
export default {
  name: 'CategoryTabList',
  components: { Scroll },
  filters: {},
  mixins: [],
  props: {
    value: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    },
    valueKey: {
      type: String,
      default: 'id'
    },
    labelKey: {
      type: String,
      default: 'name'
    }
  },
  data() {
    return {
      activeTab: ''
    }
  },

  computed: {
    tabIndex() {
      const index = this.list.findIndex(v => v[this.valueKey] === this.activeTab)
      return index
    }
  },
  watch: {
    value: {
      handler(v) {
        this.activeTab = v
      },
      immediate: true
    },
    tabIndex(v) {
      if (v === -1) return
      const els = this.$refs.tabs.querySelectorAll('.tab')
      if (els[v]) {
        const left = els[v].offsetLeft
        const top = els[v].offsetTop
        this.$refs.scroll.scrollTo(left, top)
      }
    }
  },

  created() {},
  activated() {},

  mounted() {
  },

  methods: {
    handleClick(item) {
      const value = item[this.valueKey]
      this.$emit('input', value)
    }
  }
}

</script>
<style lang='less' scoped>
  .scoll-content{
    width:100%;
    height: 28px;
    box-sizing: border-box;
  }
  .tabs{
    white-space: nowrap;
    display:inline-flex ;
    align-items: center;
    flex-wrap: nowrap;
    height: 28px;
  }
  .tab{
    display: inline-block;
    padding-left: 12px;
    &:last-child{
      padding-right: 12px;
    }
    >span{
      display: inline-block;
      padding: 0 12px;
      height: 28px;
      line-height: 28px;
      box-sizing: border-box;
      white-space: nowrap;
      background: #FAFAFA;
      border-radius: 13px;
      color: #999999;
      font-size: 12px;
    }
    &.active>span{
      background: #F5F5F5;
      font-weight: bold;
      font-size: 14px;
      color: #333;
    }
  }
</style>
